<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css" class="css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.wrap{
				/* 当一个元素定位起来了 或者是浮动起来了，它就不是块级元素或者内联元素了，它是浮动元素或者定位元素 */
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				
				width: 200px;
				height: 200px;
				border: 1px solid;
				border-radius: 50%;
			}
			ul{
				list-style: none;
			}
			ul > li{
				position: absolute;
				left: 99px;
				top: 0px;
				
				width: 2px;
				height: 10px;
				background: black;
				transform-origin: center 100px;
			}
			ul > li:nth-child(5n + 1){
				height: 15px;
			}
			.wrap > .hour{
				position: absolute;
				left: 97px;
				top: 70px;
				width: 6px;
				height: 30px;
				background-color: black;
				transform-origin: center bottom;
			}
			.wrap > .min{
				position: absolute;
				left: 98px;
				top: 50px;
				width: 4px;
				height: 50px;
				background-color: gray;
				transform-origin: center bottom;
			}
			.wrap > .sec{
				position: absolute;
				left: 99px;
				top: 30px;
				width: 2px;
				height: 70px;
				background-color: red;
				transform-origin: center bottom;
			}
			.wrap > .icon{
				position: absolute;
				left: 90px;
				top: 90px;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul>
				<!-- 向下复制一行 ctrl shift R -->
			</ul>
			<div class="hour"></div>
			<div class="min"></div>
			<div class="sec"></div>
			<div class="icon"></div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function () {
			var hourNode = document.querySelector(".wrap > .hour");
			var minNode = document.querySelector(".wrap > .min");
			var secNode = document.querySelector(".wrap > .sec");
			var ulNode = document.querySelector(".wrap > ul");
			var styleNode = document.querySelector(".css");
			var liHtml = "";
			var cssText = "";
			for (var i = 0; i < 60; i++) {
				liHtml += "<li></li>";
				cssText += "ul > li:nth-child(" + (i + 1) + "){transform: rotate(" + (i * 6) + "deg);}";
			}
			ulNode.innerHTML = liHtml;
			styleNode.innerHTML += cssText;
			
			move();
			setInterval(move, 1000);
			function move () {
				var date = new Date();
				var s = date.getSeconds();
				var m = date.getMinutes() + s/60;
				var h = date.getHours() + m/60;
				
				hourNode.style.transform = "rotate(" + (30 * h) + "deg)";
				minNode.style.transform = "rotate(" + (6 * m) + "deg)";
				secNode.style.transform = "rotate(" + (6 * s) + "deg)";
			}
		};
	</script>
</html>
